<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="EN">
<head>
    <title>运单信息</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style type="text/css">
        /*这是将打印时的页面大小设置为固定宽度大小，并保留好一定的边距*/
        @page {
            /*页面固定宽度*/
            size: 80mm 106mm;
            font-family: SimSun, serif;
            font-size: 10pt;
            color: black;
            line-height: 1.4;
            text-align: justify;
            margin: 10px;
            padding: 0;
            border: #8d8585 1px solid;

        }

        body {
            font-family: SimSun, serif;
            page-break-inside: avoid; /* 避免在内容中间分页 */
            font-size: 12px;
        }

        .container {
            /*需要将预览显示的界面限定在A4大小*/
            width: 75mm;
            /* margin-bottom: 24mm; */
            background-color: white;
        }

        table {
            width: 92%;
            border-collapse: collapse;
            margin: 0 5px;
        }

        th, td {
            border: 1px solid #ccc;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
<div class="container" th:each="data:${dataList}">
    <div th:each="led:${data.leds}">
        <div style="text-align: center;font-size: 14px;font-weight: bold;">七彩比特物流签收单</div>
        <div style="text-align: center;margin-bottom: 5px;" th:text="'('+ ${data.shipment.code} + ')'">S2403000004</div>
        <table>
            <tr>
                <th width="30">订单</th>
                <td colspan="2" th:text="${led.code}">D2403000004</td>
                <td rowspan="3" width="80">
                    <img style="width: 70px;height: 70px;" src=""/>
                </td>
            </tr>
            <tr>
                <th>日期</th>
                <td th:text="${#dates.format(led.time, 'yyyy-MM-dd')}" colspan="2">2024-04-10</td>
            </tr>
            <tr>
                <th>发货单位</th>
                <td th:text="${led.customerName}" colspan="2">李辉（干线）</td>
            </tr>
            <tr>
                <th>货名</th>
                <td th:text="${led.productName}">药品</td>
                <th width="55">件数</th>
                <td th:text="${led.number}">12</td>
            </tr>
            <tr>
                <th>重量</th>
                <td th:text="${led.weight}">12</td>
                <th>体积</th>
                <td th:text="${led.volume}">12</td>
            </tr>
            <tr>
                <th>收货人</th>
                <td th:text="${led.receivingPerson}">李四</td>
                <th>收货电话</th>
                <td th:text="${led.receivingPhone}">13888888888</td>
            </tr>
            <tr>
                <th>收货地址</th>
                <td th:text="${led.receivingAddress}" colspan="3">云南省昆明市</td>
            </tr>
            <tr>
                <th>备注</th>
                <td th:text="${led.description}">无</td>
                <th>签字</th>
                <td></td>
            </tr>
        </table>
        <div style="height:0px;border-top:1px black dashed;margin:10px 0;" />
        <div style="text-align: center;font-size: 14px;font-weight: bold;margin-bottom: 5px;">回执单</div>
        <table>
            <tr>
                <th>收货人</th>
                <td th:text="${led.receivingPerson}">李四</td>
                <th>收货电话</th>
                <td th:text="${led.receivingPhone}">13888888888</td>
            </tr>
            <tr>
                <th width="30">订单</th>
                <td th:text="${led.code}">D2403000004</td>
                <th width="30">签字</th>
                <td width="80"></td>
            </tr>
        </table>
    </div>

</div>
</body>
</html>